
import type { RootState } from '@/store';
import { useAppSelector } from '@/store/hooks';
import { Address } from '@ant-design/web3';
import { Avatar, List, Modal } from 'antd';
import { forwardRef, useImperativeHandle, useState } from 'react';
import './changeAccount.scss';
interface ChangeAccountRef {
  open: () => void;
}
const ChangeAccount = forwardRef<ChangeAccountRef>((_, ref) => {
  const walletState = useAppSelector((state: RootState) => state.wallet);
  const [open, setOpen] = useState(false);

  // 暴露open方法给父组件
  useImperativeHandle(ref, () => ({
    open: () => setOpen(true)
  }));
  const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
  return (
    <Modal
      title="切换账号"
      open={open}
      onCancel={() => setOpen(false)}
      footer={null}
    >
      <List
        dataSource={walletState.approveAddress || []}
        renderItem={(wallet) => (
          <List.Item className='cursor-pointer'>
            <List.Item.Meta className='flex items-center'
              avatar={<Avatar style={{ backgroundColor: ColorList[Math.floor(Math.random() * ColorList.length)], verticalAlign: 'middle' }}>
                {wallet.slice(0, 4)}
              </Avatar>}
              title={<Address ellipsis tooltip={false} address={wallet} />}
            />
          </List.Item>
        )}
      />
    </Modal>
  );
});

export default ChangeAccount